<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'
  import {compare} from '../widget.common.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Datepicker',
        remark: '日期选择表单',
        extends: [form, input],
        attrs: [{
            name: 'show-button',
            type: 'Boolean',
            remark: '是否显示日期图标',
            default: 'true'
          },
          {
            name: 'auto-fix',
            type: 'Boolean',
            remark: '是否自动修正不符合规范的日期',
            default: 'true'
          },
          {
            name: 'clearable',
            type: 'Boolean',
            remark: '是否可以清空',
            option: '',
          },
          {
            name: 'drop-props',
            type: 'Object',
            remark: '下拉选项对话框的属性。具体参数请参考Dialog组件',
          },
          {
            name: 'enable-hour',
            type: 'String',
            remark: '可用的小时，范围0-24，用逗号隔开',
            option: '',
            default: ''
          },
          {
            name: 'enable-minute',
            type: 'String',
            remark: '可用的分钟，范围0-59，用逗号隔开',
            option: '',
            default: ''
          },
          {
            name: 'enable-second',
            type: 'String',
            remark: '可用的秒数，范围0-59，用逗号隔开',
            option: '',
            default: ''
          },
          {
            name: 'default-hour',
            type: 'String',
            remark: '选中时间的默认小时',
            option: '',
            default: ''
          },
          {
            name: 'default-minute',
            type: 'String',
            remark: '选中时间的默认分钟',
            option: '',
            default: ''
          },
          {
            name: 'default-second',
            type: 'String',
            remark: '选中时间的默认秒数',
            option: '',
            default: ''
          },
          {
            name: 'multiple',
            type: 'Boolean',
            remark: '是否可多选',
            option: '',
            default: ''
          },
          {
            name: 'format',
            type: 'String',
            remark: '日期格式',
            default: 'yyyy-MM-dd',
            option: `
              <div><var>yyyy-MM-dd HH:mm:ss</var>: 按日+时间选择</div>
              <div><var>yyyy-MM-dd</var>: 按日选择</div>
              <div><var>yyyy-MM</var>: 按月选择</div>
              <div><var>yyyy</var>: 按年选择</div>
              <div><var>yyyy-ww</var>: 按周选择</div>
            `,
          },
          {
            name: 'min-value',
            remark: '最小值',
            type: 'Number',
          },
          {
            name: 'max-value',
            remark: '最大值',
            type: 'Number',
          },
          compare
        ],
        examples: [{
          remark: '选择日期',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-grid gap=10>
                <w-datepicker format="yyyy" placeholder="按年选择" width="130"></w-datepicker>
                <w-datepicker format="yyyy-qq" placeholder="按年季度选择" width="130"></w-datepicker>
                <w-datepicker format="yyyy-MM" placeholder="按年月选择" width="130"></w-datepicker>
                <w-datepicker format="yyyy-MM-dd" placeholder="按年月日选择" width="150"></w-datepicker>
                <w-datepicker format="yyyy-MM-dd HH:mm" placeholder="按年月日时分选择" width="180"></w-datepicker>
              </w-grid>
            </template>
          `
        },{
          remark: '选择日期+时间，时间限制为只能选择0分和30分',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-datepicker format="yyyy-MM-dd HH:mm" enable-minute="0,30"></w-datepicker>
            </template>
          `
        },]
      }
    }
  }
</script>

<style>
</style>
